<template>
  <a-modal
    style="width: 580px"
    class="modal"
    :footer="null"
    :title="showTitle"
    :visible="props.showDialog"
    @cancel="close"
  >
    <a-form
      ref="formRef"
      @finish="onFinish"
      :rules="rules"
      :model="formData"
      :label-col="{ span: 24 }"
      style="height: 500px;"
    >
      <a-form-item name="name" label="楼宇名称">
        <a-input
          v-model:value="formData.name"
          style="width: 100%"
          placeholder="请输入楼宇名称"
        ></a-input>
      </a-form-item>
      <a-form-item name="floors" label="楼宇层数">
        <a-input
          v-model:value="formData.floors"
          style="width: 100%"
          placeholder="请输入楼宇层数"
          
        ></a-input>
      </a-form-item>
      <a-form-item name="area" label="在管面积">
        <a-input
          v-model:value="formData.area"
          style="width: 100%"
          placeholder="请输入在管面积"
          addon-after="m²"
        >
        </a-input>
      </a-form-item>
      <a-form-item name="propertyFeePrice" label="物业费">
        <a-input
          v-model:value="formData.propertyFeePrice"
          style="width: 100%"
          placeholder="请输入物业费"
          addon-after="元/m²"
        >
        </a-input>
      </a-form-item>
      <a-row type="flex" justify="end" style="margin-right: -25px;margin-top: 57px;">
        <a-space>
          <a-button style="border-radius: 10px;" @click="close">取消</a-button>
          <a-button style="border-radius: 10px;" type="primary" html-type="submit">确认</a-button>
        </a-space>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import {editBuilding, addBuilding, getBuildingDetail } from '@/api/building'
import { message } from 'ant-design-vue'
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})
const formRef = ref(null)
const formData = ref({
  id: '',
  name: '',
  floors: '',
  area: '',
  propertyFeePrice: ''
})

const emit = defineEmits(['update:showDialog', 'addsuccess'])
const close = () => {
  formData.value = {
    name: '',
    floors: '',
    area: '',
    propertyFeePrice: ''
  }
  formRef.value.resetFields()
  emit('update:showDialog', false)
}

const rules = {
  name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
  floors: [
    { required: true, message: '请输入楼宇层数', trigger: 'blur' },
    {
      validate(_, value, callback) {
        if (value > 20) {
          callback(new Error('楼宇层数不能超过20层'))
        } else {
          return callback()
        }
      },
      triggrt: 'blur'
    }
  ],
  area: [{ required: true, message: '请输入在管面积', trigger: 'blur' }],
  propertyFeePrice: [{ required: true, message: '请输入物业费', trigger: 'blur' }]
}
const getBuildingDetailAPI = async (id) => {
  console.log(id);
  const {data} = await getBuildingDetail(id)
  console.log(data);
  formData.value = {
    id: data.id,
    name: data.name,
    floors: data.floors,
    area: data.area,
    propertyFeePrice: data.propertyFeePrice
  }
}
defineExpose({
  getBuildingDetailAPI
})
const onFinish = async (values) => {
  if (formData.value.id) {
    // console.log(formData.value.id);
    await editBuilding(formData.value)
    message.success('编辑成功')
  } else {
    await addBuilding(values)
    message.success('添加成功')
  }
  close()
  emit('addsuccess')
}
const showTitle = computed(() => {
  
  return formData.value.id ? '编辑楼宇' : '添加楼宇'
})
</script>
<style lang="scss" scoped>
.form-label {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-top: 10px;
  width: 20%;
}

.form-input {
  display: flex;
  width: 80%;
}

.ant-form {
  width: 580px;
  padding: 20px 80px;
}


</style>
